<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:48
-->
<template>
     <div ref="root" style="height:95%;"></div>
</template>
<script>
import {DualAxes} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default {
  setup(){
    //获取dom元素
    const root = ref(null)
    let dualAxes = null
    let initChart = ()=>{
        dualAxes = new DualAxes(root.value, {
        data:[
          [ { month: '3月', value: 62452},
          { month: '4月', value: 58151},
          { month: '5月', value: 66582},
          { month: '6月', value: 70806 },
          { month: '7月', value: 67833},
          { month: '8月', value: 60309 },
          { month: '9月', value: 61051 },
          { month: '10月', value: 55590 },
          { month: '11月', value: 68301 },
          { month: '12月', value: 75908 },
          { month: '1月', value: 102672 },
          { month: '2月', value: 86981},
        ],
        [
          { month: '3月', percent: 6452 },
          { month: '4月', percent: 5484 },
          { month: '5月', percent: 6698 },
          { month: '6月', percent: 7255 },
          { month: '7月', percent:5833},
          { month: '8月', percent: 5196 },
          { month: '9月', percent: 4420 },
          { month: '10月', percent: 5664 },
          { month: '11月', percent: 5582 },
          { month: '12月', percent: 9867 },
          { month: '1月', percent: 10473 },
          { month: '2月', percent: 9654 },
        ],
        ],
        xField: 'month',
        yField: ['value', 'percent'],
        yAxis:{
          value:{
            alias:'12345热线'
          },
          percent:{
            alias:'12301热线'
          }
        },
        geometryOptions: [
          {
            geometry: 'line',
            color: '#f5e370',
            point: {
            size: 5,
            shape: 'diamond',
            style: {
              fill: 'white',
              stroke: '#5B8FF9',
              lineWidth: 2,
    },
  },
          },
          {
            geometry: 'line',
            color: '#d9ade7',
            point: {
            size: 5,
            shape: 'diamond',
            style: {
              fill: 'white',
              stroke: '#5B8FF9',
              lineWidth: 2,
    },
  },
          },
        ],
      });

     dualAxes.render();
    }
    onMounted(initChart)
    return{
      root
    }
  }
}
</script>